<template>
  <!--  jiera-->
  <el-header class='py-4 w-full bg-white'>
    <div class='flex items-center justify-around'>
      <div class='flex items-center justify-between gap-2 cursor-pointer' @click='handlGoHome'>
        <img
          src='@/assets/coffee.jpg'
          alt='logo'
          class='h-10 w-10'
        />
        <span class='text-xl text-black'>创需平台</span>
      </div>
      <div>
        <el-menu
          :default-active='activeIndex'
          class='el-menu-demo'
          mode='horizontal'
          :ellipsis='false'
        >
          <el-menu-item
            v-for='item in navList'
            :index='item.id'
            :key='item.id'
            @click='!item.needLogin?clickHandle(item):()=>{}'
            v-login='!!item.needLogin?()=>clickHandle(item):undefined'
          >
            {{ item.name }}
          </el-menu-item>
        </el-menu>
      </div>

      <div>
        <el-input v-model='searchKeyword' style='width: 240px' size='large' placeholder='发现资源'
                  @keydown.enter='handleGoSearch' v-if='searchInputShow'>
          <template #append>
            <el-button type='primary' :icon='Search' @click='handleGoSearch'/>
          </template>
        </el-input>
        <el-button type='primary' style='margin-top: 6px;margin-left: 20px;height: 35px' @click='toSourceCode'>👉 源码获取
          👈
        </el-button>
      </div>
      <div>
        <div style='display: flex;width: 225%'>
          <el-button type='primary' round v-login='()=>{}' v-nologin-show> 登录</el-button>
          <div style="color: red;font-weight: bold;font-size: 20px">{{ messageRecordNum }}</div>
          <el-icon-bell class='small-bell' v-login-show @click='openMessageCenter'>
          </el-icon-bell>
          <ElAvatar
            :src='userInfo.avatar'
            @click='handleGoPersonalHomePage'
            v-login-show
            style='width: 12%;height: 12%'
          />
        </div>

      </div>
    </div>
    <LoginBox/>
  </el-header>
</template>

<script setup lang='ts'>
import {Search} from '@element-plus/icons-vue'
import {useRouter, useRoute} from 'vue-router'
import {ElAvatar} from 'element-plus'
import {useUserStore} from '@/stores/user'
import {watchEffect} from "vue";

const $props = defineProps({
  activeMenu: String || Number,
})


const userStore = useUserStore()

// 获取消息通知数量
userStore.getMessageRecordNum()


const route = useRoute()
const currentUserId = computed(() => userStore.userInfo.uid || '1000000')

const messageRecordNum = computed(() => userStore.messageRecordNum || '')

const searchInputShow = computed(() => !route.path.includes('search'))

const userInfo = computed(() => userStore.userInfo)

const activeIndex = computed(() => $props.activeMenu)
const searchKeyword = ref('') // 用于存储搜索关键词

const navList = [
  {
    name: '主页',
    id: '-1',
    path: '/main/home',
  },
  {
    name: '赏金',
    id: '1',
    path: '/main/typePostList',
    isTypePost: true,
  },
  {
    name: '交流',
    id: '0',
    path: '/main/typePostList',
    isTypePost: true,
  },
  {
    name: '附近/征召',
    id: '10',
    path: '/main/typePostList',
    isTypePost: true,
    needLogin: true,
  }, {
    name: '求助',
    id: '2',
    path: '/main/typePostList',
    isTypePost: true,
  },
  {
    name: '关注',
    id: '7',
    path: '/main/typePostList',
    needLogin: true,
    isTypePost: true,
  },
  {
    name: '热门',
    id: '5',
    path: '/main/typePostList',
    isTypePost: true,
  },
  {
    name: '聊天',
    id: '8',
    path: '/main/talk/chat',
    needLogin: true,
  },
]

const router = useRouter()
const currentLoginUserId = computed(() => userStore.userInfo.uid || '100000')

const clickHandle = async (item: any) => {
  if (item.isTypePost) {
    router.push(`${item.path}/${item.id}`)
  } else {
    router.push(item.path)
  }
}

const toSourceCode = () => {
  window.open('https://www.yuque.com/xianer-9khdn/he767u/zo87wyxxqfna8fo9?singleDoc#')
}

const handlGoHome = () => {
  router.push('/main/home')
}

const handleGoPersonalHomePage = () => {
  router.push(`/main/personalHomepage?id=${userInfo.value.uid || '1000000'}`)
}

// 搜索框跳转
const handleGoSearch = () => {
  router.push(`/main/search?searchText=${searchKeyword.value}`)
}

// 跳转消息中心
const openMessageCenter = () => {
  router.push(`/main/message?id=${currentUserId.value}`)
}

</script>

<style lang='scss'>
.el-menu.el-menu--horizontal {
  border: none;
}

.el-menu-demo .el-menu-item:hover {
  color: #409eff !important;
  background-color: #fff !important;
}

.small-bell {
  height: 25px;
  margin-top: 12px;
  margin-right: 17px;
}

</style>
